<template>
	<div id="app">
		<GoodsInput @search="handleSearch" @add="handleAdd" :oldGoodsList="oldGoodsList"/>
		<GoodsTable :target="target" :goodsList="goodsList"
			@del="handleDel" />
	</div>
</template>
<script>
	//需求:
	//1.根据数据动态的把表格渲染出来
	//2.在输入框中输入产品信息,可以动的添加到表格中并且进行展示
	//3.点击表格中删除按钮可以把当前的产品信息进行删除
	//4.点击数量中的➕➖按钮,数量需要发生变更
	//5.点击全选的时候,表格中的商品全部需要被选中,取消全选的时候,所有的表格中的数据取消选择
	//6.点击勾选表格中的数据,当数据全部被勾上之后,全选也要被选中
	//7.勾选商品的时候,要进行总价格的计算
	//8.数据的永久存储
	//9.简单实现搜索
	import GoodsInput from "./goodsInput.vue";
	import GoodsTable from "./goodsTable.vue";
	export default {
		data() {
			return {
				goodsList: [
					{
						id: 1,
						code: 1, //编号
						//产品图片地址
						imgSrc:
							"https://tse1-mm.cn.bing.net/th/id/R-C.fc48d5b3c65b7b79980ab09dfc2890d8?rik=jy07dRFBQAwjzw&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20190322%2fe2edee9d2ee847f0b564fcbadf356a46.jpeg&ehk=cKT9XpGfozyLcO5sia93t8gLeJurN9RM%2boqkkCk6a7Q%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
						productName: "坤坤的背带裤", //产品名称
						price: 9.9, //产品价格
						count: 1, //产品数量
					},
					{
						id: 2,
						code: 2,
						imgSrc:
							"https://tse3-mm.cn.bing.net/th/id/OIP-C.U2zPWJK7Gus24zXyQWwi0AHaEG?pid=ImgDet&rs=1",
						productName: "品如的衣服",
						price: 19.9,
						count: 1,
					},
					{
						id: 3,
						code: 3,
						imgSrc:
							"https://static1.paizi.com/uploadfile/2018/0710/20180710095354871.jpg",
						productName: "秀儿的秋裤",
						price: 9.7,
						count: 1,
					},
				],
				target: {},
				oldGoodsList:[]
			};
		},
		created(){
			//将goodsList中的选项,拷贝了一份给oldGoodsList
			this.oldGoodsList = [...this.goodsList]
		},
		components: {
			GoodsInput,
			GoodsTable,
		},
		methods: {
			//处理搜索
			handleSearch(input){
				this.goodsList = input;
			},
			handleAdd(input) {
				// console.log(input)
				//将子组件传递的数据Push到goodsList中
				this.goodsList.push(input);
			},
			handleDel(input) {
				//删除goodsList的时候,获取当前被删除商品的id,然后到checkArr这个数组中,找到id对应的数据,将这个数据从checkArr中删除掉
				let target = this.goodsList.splice(input, 1);
				//使用vue.$set将这个target变成响应式数据
				// 在组件中使用$set的时候,选项中data的属性需要预先声明
				this.$set(this, "target", target[0]);
			},
		},
	};
</script>
<style scoped>
#app {
	width: 600px;
	margin: 10px auto;
}
</style>
